{% load staticfiles %}

<div id="slider">
	<ul class="slides clearfix">
		<li><img class="responsive" src="{% static "blog/img/1.jpg" %}"></li>
		<li><img class="responsive" src="{% static "blog/img/2.jpg" %}"></li>
        <li><img class="responsive" src="{% static "blog/img/3.jpg" %}"></li>
        <li><img class="responsive" src="{% static "blog/img/4.jpg" %}"></li>
	</ul>
	<ul class="controls">
		<li><img src="{% static "blog/img/prev.png" %}" alt="previous"></li>
		<li><img src="{% static "blog/img/next.png" %}" alt="next"></li>
	</ul>
	<ul class="pagination">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<script type="text/javascript">
	$(function() {
		$("#slider").easySlider( {
			slideSpeed: 100,
			paginationSpacing: "15px",
			paginationDiameter: "12px",
			paginationPositionFromBottom: "20px",
			slidesClass: ".slides",
			controlsClass: ".controls",
			paginationClass: ".pagination"
		});
	});
</script>


